<template>
  <div>
    <h1>您输入的地址有误，请检查</h1>
    <!-- 声明式导航/内置组件导航 -->
    <router-link to="/" tag="button">返回首页</router-link>
    <router-link to="/eat" tag="button">吃</router-link>
    <!-- <router-link :to="{path:'/taoyuan'}" tag="button">1桃园</router-link> -->
    <router-link :to="{name:'jieyi'}" tag="button">1桃园</router-link>
    <router-link :to="{path: '/404'}" tag="button">404</router-link>
    <hr>
    <button @click="change('/')">返回首页</button>
    <button @click="change('/eat')">吃</button>
    <button @click="change('/taoyuan')">桃园</button>
    <button @click="change('/404')">404</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    
    }
  },
  // 组件内守卫，当成生命周期钩子函数来写
  beforeRouteEnter(to, from, next) {
    console.log('我是404组件的守卫');
    next()
  },
  methods: {
    // 编程式导航，类似js的location.href='xxxxx'
    change(path) {
      // ....复杂的代码
      // push方法相当于向历史记录中新增一条数据
      // this.$router.push(path);
      this.$router.push({
        path:path
      });
      // replace是用新的数据替换老的数据，不会新增记录
      // this.$router.replace(path);
      // go的参数都是整数，正数前进、负数后退
      // this.$router.go(1);
    }
  }
}
</script>
<style lang="">

</style>